<template>
    <div>
        <el-dialog
        :title="isEdit?'修改':title"
        :visible.sync="dialogVisible"
        width="400px">
        <el-form ref="form" :model="form" label-width="100px">
            <el-form-item label="角色">
                <el-select v-model="form.roleId" placeholder="请选择">
                    <el-option
                    v-for="item in dict.ROLE"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="名称">
                <el-input v-model="form.name" clearable></el-input>
            </el-form-item>
            <el-form-item label="手机号">
                <el-input v-model="form.phone" clearable></el-input>
            </el-form-item>
            
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitHandle">确 定</el-button>
        </span>
        </el-dialog>
    </div>
</template>

<script>
    import crudUser from '@/api/system/user'
    import { getToken } from '@/utils/auth'
    import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
    import { DomEditor } from '@wangeditor/editor'
    import '@wangeditor/editor/dist/css/style.css'
    import { Loading } from 'element-ui';
    export default {
        name: 'JiaRenReportDialog',
        components: { 
            Editor, 
            Toolbar
        },
        props: {
            title: {
                type: String,
                default:'新增'
            },
        },
        dicts: ['ROLE'],
        data () {
            return {
                dialogVisible:false,
                isEdit:false,//是否编辑
                form: {
                    id: '',
                    roleId:'',//角色
                    name:'',
                    phone: '',
                },
                editorConfig: {
                placeholder: '请输入内容...',
                maxLength: this.maxLength,  // 限制富文本输入文本字数
                cityList:[],
            },
            }
        },
        computed: {
            uploadUrl(){
                return process.env.VUE_APP_BASE_API+'/public/file/upload'
            },
            headers() {
                return { Authorization: getToken() };
            },
        },
        
        methods: {
            onCreated(editor){
                this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
                    this.$nextTick(() => {
                        const toolbar = DomEditor.getToolbar(this.editor);
                        this.curToolbarConfig = toolbar.getConfig();
                    });
            },
            getOfficeLocation(){

            },
            handleInput(value) {
                this.$emit("change", value); // 将内容同步到父组件中
            },
            onChange(editor) { // 监听富文本输入
                const text = editor.getText().replace(/\n|\r/mg, '')
                this.textLength = text.length
            },
            onMaxLength(editor) { // 当输入值达到限制值时触发事件
                this.$message.warning('输入文本数已到达最大值！')
            },
            submitHandle(){
                if (this.isEdit) {//修改
                    crudUser.edit(this.form).then((res) => {
                        this.dialogVisible = false
                        this.$notify({ message: '操作成功', type: 'success'});
                        this.$emit("submitSuccess")
                    }).catch(() => {})
                }else{
                    crudUser.add(this.form).then((res) => {
                        this.dialogVisible = false
                        this.$notify({ message: '操作成功', type: 'success'});
                        this.$emit("submitSuccess")
                    }).catch(() => {})
                }
            }
        }
    }
</script>

<style lang="scss">

</style>